<script setup>
import { ref } from 'vue'
import TaskTable from '@/components/Tables/TaskTable.vue'
import { generateRandomString, randomTime } from '@/utils/mockData'

const showCreate = ref(false)

// 生成10条任务数据
const tasks = ref(
  Array.from({ length: 10 }, () => ({
    parentId: generateRandomString(10),
    os: Math.random() > 0.5 ? 'Windows' : 'Linux',
    submitTime: randomTime(),
    queueTime: randomTime(),
    startTime: randomTime(),
    endTime: randomTime(),
    cpu: 1,
    memory: Math.floor(Math.random() * 150) + 50,
    progress: Math.floor(Math.random() * 80) + 20
  }))
)

const handleSubmit = () => {
  showCreate.value = false
}
</script>

<template>
  <div class="prod-task-view">
    <div v-if="!showCreate">
      <div class="action-bar">
        <button class="create-btn" @click="showCreate = true">创建任务</button>
      </div>
      <TaskTable :data="tasks" />
    </div>

    <div v-else class="create-panel">
      <!-- 创建任务表单（保持原有结构） -->
    </div>
  </div>
</template>

<style scoped>
.prod-task-view {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}

.action-bar {
  margin-bottom: 20px;
}

.create-btn {
  background: #409eff;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

.create-panel {
  border: 1px solid #ebeef5;
  padding: 20px;
}
</style>
